iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

輕鬆Vue一下系列 第 10

Day10- v-bind(style)

  • 分享至 

  • xImage
  •  

v-bind在vue中除了可以使用陣列的格式來處理欲使用的class,它也可以用來處理style中各種屬性的值,可以用:style作為簡寫。這裡以較常見的color、fontSize來示範:
https://ithelp.ithome.com.tw/upload/images/20190926/20112076lyS21qGRJL.jpg
利用v-bind控制div上的style,在color屬性中宣告activeColor變數;在fontSize屬性中宣告fontSize變數並在變數後方加上單位px
https://ithelp.ithome.com.tw/upload/images/20190926/20112076fQlKNFDMsI.jpg
透過在javascript中的撰寫,設定color為藍色,而fontSize大小為35
https://ithelp.ithome.com.tw/upload/images/20190926/20112076CWS2RTvqeT.jpg
明日預告: 計算屬性computed


上一篇
Day9-v-bind(Class)
下一篇
Day11-計算屬性computed
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言